<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>ios11.1.2的iphoneX下输入框被遮盖</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            header, footer, main {
                display: block;

            }

            header {
                position: fixed;
                height: 50px;
                font-size: 20px;
                left: 0;
                right: 0;
                top: 0;
            }

            footer {
                  position: fixed;  /* ios11.1.2的iphoneX下输入框被遮盖 */
                /* position: absolute;  ios11.1.2的iphoneX下输入框被遮盖*/
                z-index: 1;
                height: 34px;
                width: 100%;
                font-size: 20px;
                left: 0;
                right: 0;
                bottom: 0;
            }

            main {
                /* main绝对定位，进行内部滚动 */
                position: absolute;
                top: 50px;
                bottom: 34px;
                /* 使之可以滚动 */
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }

            main .content {
                height: 2000px;
            }
            ul{
                list-style:none;
                margin: 0;
                padding: 0;
            }
            li{
                height: 30px;
                line-height: 30px;
                font-size: 12px;
                border-bottom:1px solid gray;
            }
            html,body{
                height: 100%;
            }
            .box-tip{
                position: absolute;
                display: table;
                display: none;
                height: 100%;
                width: 100%;
                /* position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin:auto; */
            }
            .tip-wrapper{
                display:table-cell;
                text-align: center;
                vertical-align: middle;
                /*position: absolute;
                top: 50%;
                left: 50%;
                transform:translate3d(50%,50%,0);*/
                /* padding: 10px;
                min-width:3rem;
                max-width:6rem;
                min-height:20px;
                line-height: 20px;
                font-size: 12px;
                color:#fff;
                text-align: center;
                border:1px solid #ccc;
                background-color: #fc0; */
            }
            .tip-body{
                padding: 10px;
                min-width:3rem;
                max-width:6rem;
                min-height:60px;
                line-height: 20px;
                margin:0 auto;
                font-size: 12px;
                color:#fff;
                white-space: normal;
                word-break: break-all; /* 解决字母，数字不换行的问题 */
                text-align: center;
                border:1px solid #ccc;
                background-color: #fc0;
            }
        </style>
    </head>
    <body class="layout-scroll-fixed">
        <!-- fixed定位的头部 -->
        <header>
            我是fixed布局的头部
        </header>
        
        <!-- 可以滚动的区域 -->
        <main>
            <div class="content">
            <!-- 内容在这里... -->
            <ul>
                <li>第1</li>
                <li>第2</li>
                <li>第3</li>
                <li>第4</li>
                <li>第5</li>
                <li>第6</li>
                <li>第7</li>
                <li>第8</li>
                <li>第9</li>
                <li>第10</li>
                <li>第11</li>
                <li>第12</li>
                <li>第13</li>
                <li>第14</li>
                <li>第15</li>
                <li>第16</li>
                <li>第17</li>
                <li>第18</li>
                <li>第19</li>
                <li>第20</li>
                <li>第21</li>
                <li>第22</li>
                <li>第23</li>
                <li>第24</li>
                <li>第25</li>
                <li>第26</li>
                <li>第27</li>
                <li>第28</li>
                <li>第29</li>
                <li>第30</li>
                <li>第31</li>
                <li>第32</li>
                <li>第33</li>
                <li>第34</li>
                <li>第35</li>
                <li>第36</li>
                <li>第37</li>
                <li>第38</li>
                <li>第39</li>
                <li>第40</li>
                <li>第41</li>
                <li>第42</li>
                <li>第43</li>
                <li>第44</li>
                <li>第45</li>
                <li>第46</li>
                <li>第47</li>
                <li>第48</li>
                <li>第49</li>
                <li>第50</li>
                <li>第51</li>
                <li>第52</li>
                <li>第53</li>
                <li>第54</li>
                <li>第55</li>
                <li>第56</li>
                <li>第57</li>
                <li>第58</li>
                <li>第59</li>
                <li>第60</li>
                <li>第61</li>
                <li>第62</li>
                <li>第63</li>
                <li>第64</li>
                <li>第65</li>
                <li>第66</li>
                <li>第67</li>
                <li>第68</li>
                <li>第69</li>
                <li>第70</li>
                <li>第71</li>
                <li>第72</li>
                <li>第73</li>
                <li>第74</li>
                <li>第75</li>
                <li>第76</li>
                <li>第77</li>
                <li>第78</li>
                <li>第79</li>
                <li>第80</li>
                <li>第81</li>
                <li>第82</li>
                <li>第83</li>
                <li>第84</li>
                <li>第85</li>
                <li>第86</li>
                <li>第87</li>
                <li>第88</li>
                <li>第89</li>
                <li>第90</li>
                <li>第91</li>
                <li>第92</li>
                <li>第93</li>
                <li>第94</li>
                <li>第95</li>
                <li>第96</li>
                <li>第97</li>
                <li>第98</li>
                <li>第99</li>
                <li>第100</li>
            </ul>
            </div>
        </main>
        
        <!-- fixed定位的底部 -->
        <!-- <footer>
            fixed定位的底部
        </footer> -->
        <footer>
            <input type="text" id="inputEle" placeholder="Footer..."/>
            <button class="submit">提交</button>
        </footer>
        <!-- <div class="footer">
            <input type="text" id="inputEle" placeholder="Footer..."/>
            <button class="submit">提交</button>
        </div> -->
        <div id="box-tip" class="box-tip">
            <div class="tip-wrapper">
                <div class="tip-header"></div>
                <div class="tip-body" id="tipInfo"></div>
                <div class="tip-footer"></div>
            </div>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var $inputEle = $('#inputEle');
            var $footer = $('footer');
            var $boxTip = $('#box-tip');
            var $tipInfo = $('#tipInfo');
            var inputEle = document.getElementById('inputEle');
            var str = 'scrollTop:'+document.body.scrollTop+';innerHeight'+window.innerHeight+';scrollHeight:'+document.body.scrollHeight;
            alert(str);
            $inputEle.focus(function(){
                $footer.get(0).scrollIntoView(false);
                var str = 'scrollTop:'+document.body.scrollTop+';innerHeight'+window.innerHeight+';scrollHeight:'+document.body.scrollHeight;
                $tipInfo.text(str).parent().parent().css('display','table');
                setTimeout(function(){
                    var str1 = '1.5s==>>scrollTop:'+document.body.scrollTop+';innerHeight'+window.innerHeight+';scrollHeight:'+document.body.scrollHeight;
                    $tipInfo.text($tipInfo.text()+str1);
                },1500)
            }).blur(function(){
                $footer.css('position','absolute');
                // $tipInfo.text('').parent().parent().hide()
            })
        </script>
    </body>
</html>